<template>
<!--  主容器-->
    <el-container class="main-class">
<!--      头部信息-->
      <el-header>
          <el-row style="height: 100%">
<!--              头像-->
              <el-col :span="2" style="height: 100%">
                <el-avatar :size="58" :src="avatar"/>
              </el-col>

              <el-col :span="15" class="title">
                农业教育云平台<span>---管理员（{{ name}}）</span>
              </el-col>

            <el-col :span="7" class="logout">
              <el-button type="text"  @click="test">测试</el-button>
               <el-button type="text" @click="logout" style="color:white">退出登录</el-button>

            </el-col>

          </el-row>
      </el-header>

<!--      主体容器-->
      <el-container>
<!--        侧边栏-->
        <el-aside :width="menuActive ? '200px' : '60px' ">
              <div class="menu-button" @click="menuActive = !menuActive">
                  <i class="el-icon-s-fold"></i>
              </div>
<!--                          unique-opened只展开一个子菜单，router让子菜单点击进入菜单为路由模式，会让菜单index属性为path进行跳转-->
              <el-menu
                :default-active="activePath"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#2f4050"
                text-color="#fff"
                active-text-color="#ffd04b"
                unique-opened
                router
                :collapse="!menuActive">
                <el-submenu :index="index + ''" v-for="(parentMenu ,index) in menus" :key="index">
                  <template slot="title">
                      <i :class="parentMenu.icon" style="margin-right: 5px; size: 10px;"/>
                      <span>{{ parentMenu.title }}</span>
                  </template>
                    <el-menu-item :index="childrenMenu.path" v-for="(childrenMenu,i) in parentMenu.children" :key="i" @click="savePath(childrenMenu.path)">
                      <template slot="title">
                        <i :class="childrenMenu.icon" style="margin-right: 5px;size: 10px;"/>
                        <span>{{ childrenMenu.title }}</span>
                      </template>
                    </el-menu-item>
                </el-submenu>
              </el-menu>

        </el-aside>
<!--        主体-->
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item,index) in $router.currentRoute.matched" :key="index">{{item.meta.title}}</el-breadcrumb-item>
          </el-breadcrumb>
          <span v-show="$router.currentRoute.path == '/'" class="main-title">欢迎来到农业教育平台管理系统</span>
<!--          作为主体子路由-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
// @ is an alias to /src
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "HomeView",
  computed:{
      ...mapState(['name','avatar','menus'])
  },
  created() {
    console.log("11111222",this.name);
  },
  data(){
    return {
        menuActive:true,
        activePath: sessionStorage.getItem("activePath")
    }
  },
  methods: {

    test(){
      console.log(this.avatar);
    },

    click() {
      this.$ajax.get("/test").then((res) => {
        console.log(res);
      }).catch((err)=>{
        console.log(err);
      });
    },
    handleOpen(key,keyPath){
      console.log(key,keyPath);
    },
    handleClose(key,keyPath){
      console.log(key,keyPath);
    },
    logout(){
      this.$confirm('您将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {


        this.$ajax.get('/user/logout').then(res => {
          sessionStorage.clear();
          this.$router.replace("/login")
          this.$message.success(res.data.message);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    },
    savePath(path){
        sessionStorage.setItem('activePath',path);
        this.activePath = path;
    }
  },
};
</script>
<style scoped>
.el-header, .el-footer {
  background-color: #3c8dbc;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #2f4050;
  color: #333;

}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

.main-class{
   height: 100%;
}

.title{
  text-align: left;
  font-size: 25px;
  font-family: 华文行楷;
}

.logout{
  text-align: right;
}

.menu-button{
  font-size: 20px; background-color: #2f4050
}

.main-title{
  font-size: 50px;
  font-family: 华文行楷;
}

.el-menu-item{

}

.el-submenu .el-menu-item{
    padding: 0;
}

</style>
